import React from 'react'
import MathJax from 'react-mathjax2'

function MathJaxRender(props) {
  const { content } = props
  return (
    <MathJax.Context
      input='tex'
      onLoad={() => console.log("Loaded MathJax script!")}
      onError={(MathJax, error) => {
        console.warn(error);
        console.log("Encountered a MathJax error, re-attempting a typeset!");
        MathJax.Hub.Queue(
          MathJax.Hub.Typeset()
        );
      }}
      options={{
        asciimath2jax: {
          useMathMLspacing: true,
          delimiters: [["$$", "$$"], ["$", "$"], ["\\[", "\\]"], ["\\(", "\\)"], ["\(", "\)"], ["\[", "\]"], ['\$', '\$'], ['$\\', '$'], ['\\n', '\\n'],],
          preview: "none",
          packages: { '[+]': ['ams', 'amsmath', 'amssymb'] },
          amsmath: {
            extensions: ["tex2jax.js", "TeX/AMSmath.js", "TeX/AMSsymbols.js"],
          },
          extensions: ["tex2jax.js", "TeX/AMSmath.js", "TeX/AMSsymbols.js"],
          amssymb: {
            extensions: ['AMSsymbols.js'],
          },
        },
        tex: {
          inlineMath: [['$', '$'], ['$', '$'], ["\\[", "\\]"], ["\\(", "\\)"], ["\(", "\)"], ["\[", "\]"], ['\$', '\$'], ['$\\', '$'], ['\\n', '\\n'], ['$$', '\\n'], ['', '$$']],
          displayMath: [['$$', '$$'], ['$', '$'], ["\\[", "\\]"], ["\\(", "\\)"], ["\(", "\)"], ["\[", "\]"], ['\$', '\$'], ['$\\', '$'], ['\\n', '\\n'], ['$$', '\\n'], ['', '$$']],
          processEscapes: true,
          processEnvironments: true,
          packages: { '[+]': ['ams', 'amsmath', 'amssymb'] },
          amsmath: {
            extensions: ["tex2jax.js", "TeX/AMSmath.js", "TeX/AMSsymbols.js"],
          },
          extensions: ["tex2jax.js", "TeX/AMSmath.js", "TeX/AMSsymbols.js"],
          amssymb: {
            extensions: ['AMSsymbols.js'],
          },
        },

      }}
    >
      <div>
        <MathJax.Text text={content} />
      </div>
    </MathJax.Context>
  );
}

export default MathJaxRender